import React from 'react';
import seaImage from '../images/sea.png';

interface DesignPreviewProps {
  selectedImage: string | null;
  processedImage: string | null;
}

const DesignPreview: React.FC<DesignPreviewProps> = ({
  selectedImage,
  processedImage
}) => {
  const handleDownload = () => {
    if (processedImage) {
      const link = document.createElement('a');
      link.href = processedImage;
      link.download = 'redesigned_room.png';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  };

  return (
    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
      {processedImage ? (
        <>
          <h3 className="text-lg font-medium text-gray-700 mb-4">Design Comparison</h3>
          <div className="space-y-6">
            <div>
              <p className="text-sm text-gray-500 mb-2">Original</p>
              <div className="relative w-full h-64 rounded-lg overflow-hidden shadow-lg">
                <img
                  src={selectedImage || ''}
                  alt="Original room"
                  className="w-full h-full object-contain bg-gray-100"
                />
              </div>
            </div>
            <div>
              <p className="text-sm text-gray-500 mb-2">Design Result</p>
              <div className="relative w-full h-64 rounded-lg overflow-hidden shadow-lg">
                <img
                  src={processedImage}
                  alt="Redesigned room"
                  className="w-full h-full object-contain bg-gray-100"
                />
              </div>
              <button
                onClick={handleDownload}
                className="mt-4 px-6 py-2 bg-green-500 text-white rounded-lg font-medium hover:bg-green-600 transition-colors"
              >
                Download Image
              </button>
            </div>
          </div>
        </>
      ) : (
        <div className="space-y-6">
          <div>
            <p className="text-sm text-gray-500 mb-2">Preview</p>
            <div className="relative w-full h-64 rounded-lg overflow-hidden shadow-lg">
              <img
                src="https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
                alt="Preview"
                className="w-full h-full object-cover"
              />
              <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
                <div className="text-center text-white">
                  <p className="text-xl font-bold mb-2">Design Preview</p>
                  <p className="text-sm">Upload a room photo and select a style to see the effect!</p>
                </div>
              </div>
            </div>
          </div>
          <div>
            <p className="text-sm text-gray-500 mb-2">How to Use</p>
            <div className="relative w-full h-64 rounded-lg overflow-hidden shadow-lg">
              <img
                src={seaImage}
                alt="How it works"
                className="w-full h-full object-cover"
              />
              <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
                <div className="text-center text-white">
                  <p className="text-xl font-bold mb-2">Steps</p>
                  <ol className="text-left text-sm space-y-1">
                    <li>1. Upload room photo</li>
                    <li>2. Select room type</li>
                    <li>3. Select design style</li>
                    <li>4. Click generate design</li>
                  </ol>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default DesignPreview;